/*
 * @Author: xuhongling
 * @Date:   2023-08-31 15:06:28
 * @Last Modified by:   xuhongling
 * @Last Modified time: 2023-08-31 15:51:14
 */
import { Hformat, Qformat } from '@/hooks/web/useHQPFormat';

// ECharts Option
const setChartOption = (chartData, minMaxvalue, stationData) => {
  let topLegendData = {};
  let seriesData: any = [];
  let titleName = '极小值';
  const minZData: any = [], minQData: any = [], maxZData: any = [], maxQData: any = [], yearData: any = [];
  for (let i = 0; i < chartData.length; i++) {
    minZData.push(chartData[i].minZ);
    minQData.push(chartData[i].minQ);
    maxZData.push(chartData[i].maxZ);
    maxQData.push(chartData[i].maxQ);
    yearData.push(chartData[i].year);
  }
  if (minMaxvalue === 'min') {
    titleName = '极小值'
    topLegendData = {
      left: "center",
      top: "44",
      itemWidth: 20,
      data:[
        {
          name: '最小流量',
          icon: 'line',
          itemGap: 20,
        },{
          name: '最低水位',
          icon: 'line',
          itemGap: 20,
        },
      ]
    }
    seriesData = [
      {
        name: '最小流量',
        type: 'bar',
        barMaxWidth: 10,
        showSymbol: false,
        yAxisIndex: 1,
        connectNulls: true,
        data: minQData,
        itemStyle: {
          normal: {
            // color: '#00ff00'
            color: '#99CCFF'
          }
        },
      },{
        name: '最低水位',
        type: 'bar',
        barMaxWidth: 10,
        showSymbol: false,
        connectNulls: true,
        yAxisIndex: 0,
        data: minZData,
        itemStyle: {
          normal: {
            // color: '#0000ff'
            color: 'gold'
          }
        },
      }
    ]
  } else {
    titleName = '极大值'
    topLegendData = {
      left: "center",
      top: "44",
      itemWidth: 20,
      data:[
        {
          name: '最大流量',
          icon: 'line',
          itemGap: 20,
        },{
          name: '最高水位',
          icon: 'line',
          itemGap: 20,
        }
      ]
    }
    seriesData = [
      {
        name: '最大流量',
        type: 'bar',
        showSymbol: false,
        connectNulls: true,
        yAxisIndex: 1,
        barMaxWidth: 10,
        data: maxQData,
        itemStyle: {
          normal: {
            color: '#7cb5ec'
          }
        },
      },{
        name: '最高水位',
        type: 'bar',
        showSymbol: false,
        connectNulls: true,
        yAxisIndex: 0,
        barMaxWidth: 10,
        data: maxZData,
        itemStyle: {
          normal: {
            color: '#f7a35c'
          }
        },
      }
    ]
  }
  const chartOption = {
    color: ['#f7a35c', '#0000ff', '#00ff00', '#7cb5ec'],
    title: {
      text: `${stationData.stnm} ${titleName}`,
      left: 'center',
      top: '10',
      textStyle: {
        fontSize: 16,
      },
    },
    legend: topLegendData,
    xAxis: {
      type: 'category',
      data: yearData,
      boundaryGap: ['0', '5%'],
      axisLine: {
        lineStyle: {
          type: 'solid',
          color: '#333',
        },
      },
      axisTick: {
        show: true,
        inside: true,
        interval: 'auto',
        lineStyle: {
          color: '#999',
        },
      },
      splitLine: {
        show: false,
        lineStyle: {
          type: 'dashed',
          color: '#f4f4f4',
        },
      },
      axisLabel: {
        show: true,
        margin: 14,
        color: '#333',
        fontSize: 12,
      },
    },
    yAxis: [
      {
        type: 'value',
        position: 'left',
        name: '水位(m)',
        scale: true,
        splitNumber: 5,
        boundaryGap: ['0', '5%'],
        nameTextStyle: {
          color: '#333'
        },
        axisTick: {
          show: false,
          inside: true,
          lineStyle: {
            color: '#999',
          },
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#333',
          },
        },
        axisLabel: {
          show: true,
          color: '#333',
          fontSize: 12,
          formatter(value) {
            if (value) {
              return Hformat(value);
            }
          },
        },
        splitLine: {
          show: false,
          lineStyle: {
            type: 'dashed',
            color: '#f4f4f4',
          },
        },
      },
      {
        type: 'value',
        position: 'right',
        name: '流量(m³/s)',
        scale: true,
        splitNumber: 2,
        boundaryGap: ['0', '5%'],
        nameTextStyle: {
          color: '#333'
        },
        axisTick: {
          show: false,
          inside: true,
          lineStyle: {
            color: '#999',
          },
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#333',
          },
        },
        axisLabel: {
          show: true,
          color: '#333',
          fontSize: 12,
          formatter(value) {
            if (value) {
              return Qformat(value);
            }
          },
        },
        splitLine: {
          show: false,
          lineStyle: {
            type: 'dashed',
            color: '#f4f4f4',
          },
        },
      }
    ],
    series: seriesData,
  }
  return chartOption;
}
export default setChartOption;
